import { Component } from '@angular/core';
import { IonicPage,
    NavController,
    NavParams,
    ActionSheetController,
    AlertController,
    LoadingController
} from 'ionic-angular';


@IonicPage()
@Component({
  selector: 'page-combody',
  templateUrl: 'combody.html',
})
export class CombodyPage {

    public pageInfo = {
        "id":'',
        "name":''
    }
    public timeStarts;
    public myIcon;

    constructor(public navCtrl: NavController,
                public navParams: NavParams,
                public actionSheetCtrl: ActionSheetController,
                public alertCtrl: AlertController,
                public loadingCtrl: LoadingController) {
        this.pageInfo.id = this.navParams.get('id');
        this.pageInfo.name = this.navParams.get('name');
        this.myIcon = "home";
    }

    ionViewDidLoad() {
        console.log('ionViewDidLoad CombodyPage');
    }

    presentActionSheet() {
        let actionSheet = this.actionSheetCtrl.create({
            title: '操作',
            buttons: [
                {
                    text: '处理1',
                    role: 'click1',
                    handler: () => {
                        console.log('Destructive clicked');
                    }
                },
                {
                    text: '处理1',
                    role: 'click2',
                    handler: () => {
                        console.log('Archive clicked');
                    }
                },
                {
                    text: '取消',
                    role: 'cancel',
                    handler: () => {
                        console.log('Cancel clicked');
                    }
                }
            ]
        });

        actionSheet.present();
    }

    basic(){
        let alert = this.alertCtrl.create({
            title: '主题!',
            subTitle: '内容!',
            buttons: ['确定']
        });

        alert.present();
    }

    prompt() {
        let prompt = this.alertCtrl.create({
            title: '主题',
            message: "内容",
            inputs: [
                {
                    name: '标签',
                    placeholder: '内容'
                },
            ],
            buttons: [
                {
                    text: '取消',
                    handler: data => {
                        console.log('Cancel clicked');
                    }
                },
                {
                    text: '保存',
                    handler: data => {
                        console.log('Saved clicked');
                    }
                }
            ]
        });
        prompt.present();
    }

    showConfirm() {
        let confirm = this.alertCtrl.create({
            title: '主题?',
            message: '内容?',
            buttons: [
                {
                    text: '否',
                    handler: () => {
                        console.log('Disagree clicked');
                    }
                },
                {
                    text: '是',
                    handler: () => {
                        console.log('Agree clicked');
                    }
                }
            ]
        });
        confirm.present();
    }

    public testRadioOpen=false;
    public testRadioResult:any;
    showRadio() {
        let alert = this.alertCtrl.create();
        alert.setTitle('单选组');

        alert.addInput({
            type: 'radio',
            label: '蓝色',
            value: '蓝色',
            checked: true
        });
        alert.addInput({
            type: 'radio',
            label: '红色',
            value: '红色',
            checked: false
        });
        alert.addInput({
            type: 'radio',
            label: '白色',
            value: '白色',
            checked: false
        });

        alert.addButton('取消');
        alert.addButton({
            text: '选择',
            handler: data => {
                this.testRadioOpen = true;
                this.testRadioResult = data;
            }
        });
        alert.present();
    }

    public testCheckboxOpen=false;
    public testCheckboxResult:any;
    showCheckbox() {
        let alert = this.alertCtrl.create();
        alert.setTitle('多选框?');

        alert.addInput({
            type: 'checkbox',
            label: '条件1',
            value: '条件1',
            checked: true
        });

        alert.addInput({
            type: 'checkbox',
            label: '条件2',
            value: '条件2'
        });

        alert.addButton('取消');
        alert.addButton({
            text: '选择',
            handler: data => {
                console.log('Checkbox data:', data);
                this.testCheckboxOpen = true;
                this.testCheckboxResult = data;
            }
        });
        alert.present();
    }

    presentLoading() {
        let loader = this.loadingCtrl.create({
            content: "请等待...",
            duration: 3000
        });
        loader.present();
    }
    presentLoadingDefault(type) {
        let loading = this.loadingCtrl.create({
            spinner: type,
            content: '请等待...'
        });

        loading.present();

        setTimeout(() => {
            loading.dismiss();
        }, 2000);
    }

    presentLoadingCustom() {
        let loading = this.loadingCtrl.create({
            spinner: 'hide',
            content: `
      <div class="custom-spinner-container">
        <div class="custom-spinner-box">这里是自定义的内容</div>
        <div class="custom-spinner-box">这里是自定义的内容</div>
        <div class="custom-spinner-box">这里是自定义的内容</div>
      </div>`,
            duration: 2000
        });

        loading.onDidDismiss(() => {
            console.log('Dismissed loading');
        });

        loading.present();
    }

    presentLoadingText() {
        let loading = this.loadingCtrl.create({
            spinner: 'hide',
            content: '请等待...'
        });

        loading.present();

        setTimeout(() => {
            console.log('this.nav.push(Page2)');
        }, 1000);

        setTimeout(() => {
            loading.dismiss();
        }, 3000);
    }

}
